<!DOCTYPE html>
<html  lang="zh" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <!--360浏览器优先以webkit内核解析-->
    <title>睡眠中心</title>
    <link rel="shortcut icon" href="favicon.ico">
    <link href="../static/css/bootstrap.min.css" th:href="@{/css/bootstrap.min.css}" rel="stylesheet"/>
    <link href="../static/css/font-awesome.min.css" th:href="@{/css/font-awesome.min.css}" rel="stylesheet"/>
    <link href="../static/css/style.min.css" th:href="@{/css/style.min.css}" rel="stylesheet"/>
</head>

<body class="gray-bg">
    <div class="wrapper wrapper-content">
        <div class="row">
<!--            <label>消息：</label><input id="broadcastMsg" type="text" disabled="disabled">-->
            <div class="tabs-container">
                <div class="tabs-left">
                    <ul id="deviceTabs" class="nav nav-tabs">
                    </ul>
                    <div id="deviceDatas" class="tab-content ">
                        <div id="tab-10" class="tab-pane active">
                            <div id="testDev" class="panel-body">
                                <strong>排版与链接</strong>

                                <p>Bootstrap 排版、链接样式设置了基本的全局样式。分别是： 为 body 元素设置 background-color: #fff; 使用 @font-family-base、@font-size-base 和 @line-height-base a变量作为排版的基本参数 为所有链接设置了基本颜色 @link-color ，并且当链接处于 :hover 状态时才添加下划线 这些样式都能在 scaffolding.less 文件中找到对应的源码。</p>
                            </div>
                        </div>
                        <div id="tab-11" class="tab-pane">
                            <div class="panel-body">
                                <strong>栅格系统</strong>

                                <p>Bootstrap 提供了一套响应式、移动设备优先的流式栅格系统，随着屏幕或视口（viewport）尺寸的增加，系统会自动分为最多12列。它包含了易于使用的预定义类，还有强大的mixin 用于生成更具语义的布局。</p>
                            </div>
                        </div>
                    </div>

                </div>
            </div>
        </div>
    </div>
    <script th:src="@{/js/jquery.min.js}"></script>
    <script th:src="@{/js/bootstrap.min.js}"></script>
    <script th:src="@{/ajax/libs/layer/layer.min.js}"></script>
    <script th:src="@{/js/sockjs.min.js}"></script>
    <script th:src="@{/js/stomp.js}"></script>
    <th:block th:include="include :: footer" />
    <th:block th:include="include :: datetimepicker-js" />
    <script type="text/javascript" src="https://fastly.jsdelivr.net/npm/echarts@5.3.3/dist/echarts.min.js"></script>
    <script type="text/javascript">
        $.ajax({
            type: "post",
            dataType: "json",
            url: "/common/queryDevice",
            success: function (res) {
                var html = [];
                var html1 = [];
                for (var i = 0; i < res.data.length; i++) {
                    if(i == 0){
                        html.push("<li class=\"active\"><a data-toggle=\"tab\" href=\"#" + res.data[i].deviceCode + "\">" + res.data[i].deviceName + "</a></li>");
                        html1.push("<div id=\"" + res.data[i].deviceCode + "\" class=\"tab-pane active\"><div id=\"dev-" + res.data[i].deviceCode + "\" class=\"panel-body\"></div></div>");
                    }else{
                        html.push("<li class=\"\"><a data-toggle=\"tab\" href=\"#" + res.data[i].deviceCode + "\">" + res.data[i].deviceName + "</a></li>");
                        html1.push("<div id=\"" + res.data[i].deviceCode + "\" class=\"tab-pane\"><div id=\"dev-" + res.data[i].deviceCode + "\" class=\"panel-body\"></div></div>");
                    }
                }
                $("#deviceTabs").html(html);
                $("#deviceDatas").html(html1);
            }
        })
    </script>
</body>
</html>
